<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_DOM事件监听</title>
</head>
<body>
    <button onclick="alert('点击了!')">按钮1</button>
    <button id="btn">按钮2</button>
    <span>震惊:居然发生了这种事...</span>
    <div>
        lorem*60
    </div>
    <script>
        /* resize重置窗口大小事件 scroll滚动窗口事件 */
        window.addEventListener('resize',function (){
            //alert('窗口大小被重置了!');
        })
        window.addEventListener('scroll',function (){
            alert('窗口被滚动了!');
        })

        let spanE = document.querySelector('span');
        /* 给span添加鼠标移入事件 */
        spanE.addEventListener('mouseover',function(){
            console.log('标题被查看了!');
        })

        let btnE = document.getElementById('btn');
        /* 给按钮2添加点击事件 */
        btnE.addEventListener('click',function(){
            alert('按钮2被点击了!');
        })
    </script>


</body>
</html>